<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Line Editor</title>
</head>

<body>
  <h1>SVG Line Editor</h1>

  <!-- SVG容器 -->
  <svg id="svg-container" width="100%" height="300">
    <!-- 初始线条 -->
    <line id="editable-line" x1="100" y1="100" x2="300" y2="100" stroke="black" stroke-width="2" />
  </svg>

  <!-- 线条属性控制 -->
  <label for="line-width">线条宽度:</label>
  <input type="range" id="line-width" min="1" max="10" value="2">

  <label for="line-length">线条长度:</label>
  <input type="range" id="line-length" min="50" max="500" value="200">

  <label for="line-color">线条颜色:</label>
  <input type="color" id="line-color" value="#000000">
  <script>
    // 获取SVG元素和控制元素
    const svgContainer = document.getElementById("svg-container");
    const editableLine = document.getElementById("editable-line");
    const lineWidthInput = document.getElementById("line-width");
    const lineLengthInput = document.getElementById("line-length");
    const lineColorInput = document.getElementById("line-color");

    // 监听控制元素的变化
    lineWidthInput.addEventListener("input", updateLineAttributes);
    lineLengthInput.addEventListener("input", updateLineAttributes);
    lineColorInput.addEventListener("input", updateLineAttributes);

    // 更新线条属性的函数
    function updateLineAttributes() {
      const newLineWidth = lineWidthInput.value;
      const newLineLength = lineLengthInput.value;
      const newLineColor = lineColorInput.value;

      // 更新线条的属性
      editableLine.setAttribute("stroke-width", newLineWidth);
      editableLine.setAttribute("x2", parseInt(editableLine.getAttribute("x1")) + parseInt(newLineLength));
      editableLine.setAttribute("stroke", newLineColor);
    }
  </script>
</body>

</html>